import {
    Card,
    Breadcrumb,
    Form,
    Button,
    Radio,
    Input,
    Upload,
    Space,
    Select,
    message,
} from 'antd'
import { PlusOutlined } from '@ant-design/icons'
import { Link, useSearchParams } from 'react-router-dom'
import './index.scss'

import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css'; // 引入默认主题的样式
import { useEffect, useState } from 'react';
import { createArticleAPI, getArticleById, updateArticleAPI } from '@/apis/article';
import { useChannel } from '@/hooks/useChannel';


const { Option } = Select

const Publish = () => {

    // //获取频道列表
    // const [channelList, setChannelList] = useState([])
    // useEffect(() => {
    //     //1.封装函数 在函数内调用接口
    //     const getChannelList = async () => {
    //         const res = await getChannelAPI()
    //         setChannelList(res.data.channels)
    //     }
    //     //2.调用函数
    //     getChannelList()
    // }, [])
    const { channelList } = useChannel()    //逻辑为上方已注释代码,已封装在src/hooks


    // 提交表单
    const onFinish = (formValue) => {
        console.log('表单提交成功:', formValue);
        //校验封面类型imageType是否和实际的图片列表是相等的
        if (imageList.length !== imageType) return message.warning('封面类型和图片数量不匹配')
        const { title, content, channel_id } = formValue
        //1.按照接口文档的格式处理收集到的表单数据
        const resData = {       //此处两个名字一样使用了简写
            title,
            content,
            cover: {
                type: imageType,        //封面模式
                //编辑和新增的时候url的数据位置不一样,有后端决定,需要做点修改
                images: imageList.map(item => {
                    if (item.response) {   //新增文章
                        return item.response.data.url
                    } else {                //编辑文章
                        return item.url
                    }
                }
                )             //上传图片列表
            },
            channel_id,
        }
        //2.调用接口函数提交表单数据
        //处理调用不同的接口  新增-新增接口     编辑状态 - 更新接口
        if (articleId) {
            //更新接口
            updateArticleAPI({ ...resData, id: articleId })
            message.success('更新文章成功')
        } else {
            //新增接口
            createArticleAPI(resData)
            message.success('发表文章成功')
        }

    }

    //上传回调
    const [imageList, setImageList] = useState([])
    const onChange = (value) => {
        console.log('上传回调', value);
        setImageList(value.fileList)
    }

    //切换图片封面类型
    const [imageType, setImageType] = useState(0)
    const onTypeChange = (e) => {
        console.log('用户切换封面了', e.target.value)
        setImageType(e.target.value)
    }

    //编辑---回填数据
    const [searchParams] = useSearchParams()    //通过useNavigate传过来的id
    const articleId = searchParams.get('id')
    //获取实例
    const [form] = Form.useForm()
    console.log(articleId)
    useEffect(() => {
        //1.通过id读取数据
        async function getArticleDetail() {
            const res = await getArticleById(articleId)
            console.log('res.data:', res.data)
            const data = res.data
            const { cover } = data
            //2.调用调用实例方法 完成回调
            form.setFieldsValue({
                ...data,
                type: cover.type
            })
            //为什么现在的写法无法回填封面?
            //数据结构的问题 set方法-> {type:3}   {cover:{type:3 }}

            //回填图片列表
            setImageType(cover.type)
            //显示图片{url:url}
            setImageList(cover.images.map(url => {
                return { url }
            }))
        }
        //只有有id的时候才能调用此函数回填
        if (articleId) {
            getArticleDetail()
        }
    }, [articleId, form])

    return (
        <div className="publish">
            <Card
                title={
                    <Breadcrumb items={[
                        { title: <Link to={'/'}>首页</Link> },
                        { title: `${articleId ? '编辑' : '发布'}文章` },
                    ]}
                    />
                }
            >
                <Form
                    labelCol={{ span: 4 }}
                    wrapperCol={{ span: 16 }}
                    initialValues={{ type: 0 }}         //此处type值为Radio中value中默认值
                    onFinish={onFinish}
                    form={form}
                >
                    <Form.Item
                        label="标题"
                        name="title"
                        rules={[{ required: true, message: '请输入文章标题' }]}
                    >
                        <Input placeholder="请输入文章标题" style={{ width: 400 }} />
                    </Form.Item>
                    <Form.Item
                        label="频道"
                        name="channel_id"
                        rules={[{ required: true, message: '请选择文章频道' }]}
                    >
                        <Select placeholder="请选择文章频道" style={{ width: 400 }}>
                            {/* value属性用户选中之后会自动手机起来作为接口的提交字段 */}
                            {channelList.map(item => <Option key={item.id} value={item.id}>{item.name}</Option>)}
                        </Select>
                    </Form.Item>
                    <Form.Item label="封面">
                        <Form.Item name="type">
                            <Radio.Group onChange={onTypeChange}>
                                <Radio value={1}>单图</Radio>
                                <Radio value={3}>三图</Radio>
                                <Radio value={0}>无图</Radio>
                            </Radio.Group>
                        </Form.Item>
                        {/* 
                        listType:决定选择文件框的外观样式
                        shouwUploadList:是否显示已上传的文件列表
                        */}
                        {imageType > 0 && <Upload
                            name='image'
                            listType="picture-card"
                            showUploadList
                            action={'http://geek.itheima.net/v1_0/upload'}
                            onChange={onChange}
                            maxCount={imageType}    //上传的照片数量控制
                            fileList={imageList}
                        >
                            <div style={{ marginTop: 8 }}>
                                <PlusOutlined />
                            </div>
                        </Upload>}

                    </Form.Item>
                    <Form.Item
                        label="内容"
                        name="content"
                        rules={[{ required: true, message: '请输入文章内容' }]}
                    >
                        {/* 福文本编辑器 */}
                        <ReactQuill
                            className="publish-quill"
                            theme="snow"
                            placeholder="请输入文章内容"
                        />
                    </Form.Item>

                    <Form.Item wrapperCol={{ offset: 4 }}>
                        <Space>
                            <Button size="large" type="primary" htmlType="submit">
                                发布文章
                            </Button>
                        </Space>
                    </Form.Item>
                </Form>
            </Card>
        </div>
    )
}

export default Publish